<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>状态任务栏</title>
    <script src="http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
    <script src="/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    #box{
        width:650px;
        margin:auto;
        padding-top:20px;
    }
    ul li{
        width:650px;
        height:40px;
        list-style: none;
        border:1px solid #ccc;
        border-top:0;
        text-align:center;
        padding-top:15px;
        font-size:14px;
    }
    li span{
        display: inline-block;
        width:500px;
    }
    button{
        margin-left:10px;
        color:white;
        outline: none;
        border: none;
        padding:4px;
        font-size:12px;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover{
        color:#999;
        background-color: #ccc;
    }
    input{
        width:620px;
        height:20px;
        padding:15px;
        border:1px solid #9b9b9b;
        margin-top:30px;
        ime-mode:disabled;
    }
    .s1{
        background: rgb(255, 245, 250);
    }
    .s2{
        background: rgb(255, 249, 237);
    }
    .s3{
        background: rgb(238, 250, 255);
    }
    .b1{
        background: rgb(248, 179, 208);
    }
    .b2{
        background: orange;
    }
    .b3{
        background: rgb(187, 225, 241);
    }
    #arr{
        display: none;
    }
</style>
<body>
    <div id="container"></div>
    <template id="root">
        <div id="box">
            <el-popover
                placement="top-start"
                title="任务列表的用法"
                width="200"
                trigger="click"
                content="输入要做的事情（不可为数字）,按“0” 添加“未完成”的事情按“1” 添加“进行中”的事情按“2” 添加“已完成”的事情返回任务列表按钮可以返回增删过的任务列表">
                <el-button slot="reference">点我看用法啦！</el-button>
            </el-popover>
            <button class="b1" @click='isdo(0)'>未完成</button>
            <button class="b2" @click='isdo(1)'>进行中</button>
            <button class="b3" @click='isdo(2)'>已完成</button>
            <button @click="reset()">返回任务列表</button>
            <input type="text" @keyup='add($event)' v-model.trim="content" placeholder="写下你的计划叭！">
            <ul id="lists">
                <li v-for='(val,index) in lists' v-show='val.show' :class='{s1:val.status==0,s2:val.status==1,s3:val.status==2}'>
                    <span>{{val.doing}}</span>
                    <select v-model='val.status'>
                        <option value="0">未完成</option>
                        <option value="1">进行中</option>
                        <option value="2">已完成</option>
                    </select>
                    <button @click='del(index)' :class='{b1:val.status==0,b2:val.status==1,b3:val.status==2}'>删除</button>
                </li>
            </ul>
        </div>
    </template>
</body>
<script>
    var vm=new Vue({
        el:'#container',
        template:'#root',
        data:{
            active:true,
            lists:[
                {
                    status:0,
                    doing:'吃饭',
                    // show:true
                },
                {
                    status:1,
                    doing:'睡觉',
                    // show:true
                },{
                    status:2,
                    doing:'打豆豆',
                    // show:true
                },
            ],
            content:'',
        },
        methods:{
            add(e){
                var str=e.target.value;
                var num=Number(str.slice(str.length-1));
                if(num==0||num==1||num==2){
                    if(str.slice(str.length-2,str.length-1)==''){
                        this.content='';
                        return;
                    }
                    let obj={
                        status:num,
                        doing:this.content.slice(0,this.content.length-1),
                        // show:true
                    };
                    this.lists.push(obj);
                    this.content='';
                }
            },
            del(index){
                this.lists.splice(index,1);
            },
            isdo(num){
                this.lists.forEach((val)=>{
                    val.show=val.status==num;
                });
            },
            reset(){
                this.lists.forEach((val)=>{
                    val.show=true;
                });
            }
        }
    });
</script>
</html>